<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width = device-width,initial-scale=1.0">
	<meta charset="utf-8">
	<title>oppo界面</title>
	<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.min.js"></script>
	<!-- 引用css样式 -->
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<!--  导航栏部分-->
		<div id="nav">
			<div id="nav1">	
			</div>

			<div id="nav2">
				<div id="box1">
					<ul class="left1">	
					    <li><a href="#"><div class="picture" id="p1"><img src="img\weibo.jpg" width="20px" height="20px"></div></a></li>
				        <li><a href="#"><div class="picture" id="p2"><img src="img\music.jpg" width="20px" height="20px"></div></a></li>
				        <li><a href="#"  style="text-decoration:none;"><p style="color: green;">4001-666-888</p></a></li>
					</ul>
				</div>
				<div id="box2">
					<ul class="right1" >
						<li><a href="#">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">积分兑换</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a herf="#"><img src="img\shopping.jpg" style="vertical-align: middle;margin-right:4px;"><p style="display: inline-block;vertical-align: middle;">购物车</p></a></li>
					</ul>
				</div>
			</div>
			<div id="nav3">
				<div id="box3">
					<div class="picture" id="p1"><img src="img\logo.png" style="vertical-align: middle;" >
					</div>
				</div>
				<div id="box4">
					<ul class="right2">
						<li><a href="#">首页</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">服务</a></li>
                        <li><a href="#">体验店</a></li>
                        <li><a href="#">软件商店</a></li>
                        <li ><a href="#">ColorOS</a></li>
					</ul>
				</div>
			</div>
			<!-- 滚动图 -->
			<div id="nav4">
				<div id="tabpic">
				 	<div style="display:block;"><img src="img/reno7.png" width="100%" height="95%"/></div>
				 	<div style="display:none;"><img src="img/X3.jpg" width="100%" height="95%" /></div>
				 	<div style="display:none;"><img src="img/K9S.png" width="100%" height="95%" /></div>
				</div>
				<div style="text-align: center;">
					<a href="javascript:void(0)" name="tablink" οnclick="div_tab(0)" style="color:#ff0000;text-decoration: none;">1</a>
					<a href="javascript:void(0)" name="tablink" οnclick="div_tab(1)" style="color:#0000ff;text-decoration: none;">2</a>
					<a href="javascript:void(0)" name="tablink" οnclick="div_tab(2)" style="color:#0000ff;text-decoration: none;">3</a>
				</div>
			</div>
			</div>
		<div id="main">
			<div id="TOP">
				<!-- 明星机型 -->
				<div id="box5">
					<div style="text-align: center;"><img src="img\i-c-title.png">
					</div>
					<div id="top">
						<div class="pic">
    					    <img src="img\x 3.jpg" width="90%"; height="350px" margin-bottom="20px">
    					    <div class="top1">
    						    <h2>find X3</h2>
    					        <p style="color:grey;">10亿色双主摄</p>
    					        <p style="display: inline-block;vertical-align: middle; color:green;">￥3999 立即购买 <img src="img\1.png" margin-top="3px" style="vertical-align: middle;">
    					        </p>
    				        </div>
    				    </div>
						<div class="pic">
							<img src="img\Reno 7.png" width="90%"; height="350px" margin-bottom="20px">
							<div class="top1">
								<h2>Reno7</h2>
    					        <p style="color:grey;">65万超级闪充</p>
    					        <p style="display: inline-block;vertical-align: middle; color:green;">￥2649 立即购买 <img src="img\1.png" margin-top="3px" style="vertical-align: middle;"></p>
    				        </div>
    				    </div>
    				    <div class="pic">
    					    <img src="img\A93s.jpg" width="90%"; height="350px" margin-bottom="20px">
    					    <div class="top1">
    						    <h2>A93S</h2>
    					        <p style="color:grey;">4800万超清三摄</p>
    					        <p style="display: inline-block; vertical-align: middle; color:green;">￥1799 立即购买 <img src="img\1.png" margin-top="3px" style="vertical-align: middle;">
    					        </p>
    				        </div>
    				    </div>
    				    <div class="pic">
    					    <img src="img\K9s.jpg" width="90%"; height="350px" margin-bottom="20px">
    					    <div class="top1">
    						    <h2>K9S</h2>
    					        <p style="color:grey;">6400万潮款人像三摄</p>
    					        <p style="display: inline-block;vertical-align: middle; color:green;">￥1699 立即购买 <img src="img\1.png" margin-top="3px" style="vertical-align: middle;">
    					        </p>
    				        </div>
    				    </div>   
    			    </div>
    		    </div>
    		</div> 
    		<div id="MIDDLE"> 
    			<div class="box" id="box6">
				<div style="text-align: center; margin: 25px 0;"><img src="img\wb.png"></div>
				<div id="midd">
					<div id="photo1">
						<div class="middle" id="middle1">
							<img src="img\k.jpg" width="94%" height="480px">
						</div>
						<div id="middle2" class="middle">
							<div id="mid1">
								<div class="mid">
									<p style="font-size: 10px">OPPO手机官网ACCESSORY配件</p>
							        <hr />
							    </div>
							<table style="width:100%;text-align: center;background: white;margin:0 auto;">
								<tr>
									<td>耳机</td>
									<td>移动电源</td>
								</tr>
								<tr>
									<td>保护壳</td>
									<td>贴膜</td>
								</tr>
								<tr>
									<td>皮套</td>
									<td>数据线</td>
								</tr>
							</table>
                            <div class="mid">
                            	<hr />
							    <p style="display: inline-block;vertical-align: middle; text-align: center;font-size: 16px;">全部配件 <img src="img\1.png" margin-top="3px" style="vertical-align: middle;"></p>
							</div>
							</div>
							<div id="mid2">
								<img src="img\line.jpg" width="100%" height="225px"style="box-shadow:0px 2px 0px #D3D3D3;" >
							</div>
						</div>
						<div  class="middle" id="middle3">
							<img src="img\USB.jpg" width="100%" height="225px" style="box-shadow:0px 2px 0px #D3D3D3;" >
						</div>
					</div>
					<div id="photo2">
						<div  class="middle" id="middle4">
							<img src="img\vooc.jpg" width="100%" height="236px" style="box-shadow:0px 2px 0px #D3D3D3;">
						</div>
						<div  class="middle" id="middle5">
							<div id="mid3">
								<img src="img\LE103.jpg" width="100%" height="478px" style="box-shadow:0px 2px 0px #D3D3D3;">
						    </div>
						    <div id="mid4">
						    	<img src="img\MH124.jpg" width="100%" height="223px" style="box-shadow:0px 2px 0px #D3D3D3;" \>
						    	<div id="mid5">
						    		<img src="img\LE505.jpg" width="100%" height="225px" style="box-shadow:0px 3px 0px green;" \>
						        </div>
						    </div>
						</div>
					</div>					
				</div>
		    </div>
		    <div id="BOTTOM">
		    	<div class="box" id="box7">
		    		<div style="text-align: center; margin-bottom:30px"><img src="img\WORLB.png"></div>
		    		<div id="photo3">
		    			<div id="bottom1">
		    				<img src="img\SCORE.png"
		    				width="97%" height="225px"  style="margin-bottom: 17px; box-shadow:0px 3px 0px D3D3D3;" \>
		    				<img src="img\POS.jpg" width="97%" height="225px" style="box-shadow:0px 3px 0px D3D3D3;" \>
		    			</div>
		    			<div id="bottom2">
		    				<img src="img\VISA.jpg"
		    				width="97%" height="225px"  style="margin-bottom: 21px; box-shadow:0px 3px 0px D3D3D3; float:right;" \>
		    				<img src="img\UPGRADE.jpg" width="97%" height="225px" style="box-shadow:0px 3px 0px D3D3D3; float:right;" \>
		    			</div>
		    		</div>
		    		<div id="photo4">
		    			<div id="bottom3">
		    				<div id="bot1">
		    					<p>新闻</p>
		    				</div>
		    				
		    			</div>
		    			<div id="bottom4">
		    				<div class="bot" id="bot2">
		    					<img src="img\AB.jpg" width="25%" height="78px" style="float:left; margin-right:15px;">
		    					<p>OPPO R5金色版 打造纽约时装周梦幻之旅</p>
		    				</div>
		    				<div class="bot" id="bot3">
		    					<img src="img\CD.jpg" width="25%" height="78px" style="float:left; margin-right:15px;">
		    					<p>oppo 手机携手时尚大咖 首度打造杂志封面大片</p>
		    				</div>
		    				<div class="bot" id="bot4">
		    					<img src="img\EF.jpg" width="25%" height="78px" style="float:left; margin-right:15px;">
		    					<p>业界革命 OPPO发布全球最高灵敏度平面振膜耳机PM-1</p>
		    				</div>
		    				<div class="bot" id="bot5">
		    					<img src="img\GH.jpg" width="25%" height="78px" style="float:left; margin-right:15px;">
		    					<p>极致原音 OPPO PM-1耳机斩获EISA年度HIFI年度大奖</p>
		    				</div>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		</div>
		<div id="footer">
			<div id="box8">
				<div id="footer1">
					<div class="fot" id="fot1">
						<div class="img"><img src="img\icons.jpg"></div>
						<div class="par">
							<p>正品保障</p>
							<p style="font-size:13px;color:grey;">所有产品都是原装正品</p>
						</div>
					</div>
					<div class="fot" id="fot2">
						<div class="img"><img src="img\icons-6.png"></div>
						<div class="par">
							<p>79元起包邮</p>
							<p style="font-size:13px;color:grey;">高效的物流直达配送</p>
						</div>
					</div>
					<div class="fot" id="fot3">
						<div class="img"><img src="img\icons-7.png"></div>
						<div class="par">
							<p>7天退换货</p>
							<p style="font-size:13px;color:grey;">支持七天退货,30天换货</p>
						</div>
					</div>
					<div class="fot" id="fot4">
						<div class="img"><img src="img\icons-8.png"></div>
						<div class="par">
							<p>285自提点</p>
							<p style="font-size:13px;color:grey;">轻松自在,覆盖各大城市</p>
						</div>
					</div>
					<div class="fot" id="fot5">
						<div class="img"><img src="img\icons-9.png"></div>
						<div class="par">
							<p>356家客服网点</p>
							<p style="font-size:12px;color:grey;">专业保修服务就在家门口</p>
						</div>
					</div>
				</div>
				<div id="footer2">
					<div class="foo" id="foo1">
						<ul style="list-style-type:none;">
							<li><a herf="">关于我们</a></li>
							<li style="color:grey;"><a herf="">关于oppo</a></li>
							<li style="color:grey;"><a herf="">新闻中心</a></li>
							<li style="color:grey;"><a herf="">人才招聘</a></li>
						</ul>
					</div>
					<div class="foo" id="foo2">
						<ul style="list-style-type:none;">
							<li><a herf="">推荐机型</a></li>
							<li style="color:grey;"><a herf="">N3</a></li>
							<li style="color:grey;"><a herf="">R5</a></li>
							<li style="color:grey;"><a herf="">R1C</a></li>
							<li style="color:grey;"><a herf="">Find 7</a></li>
						</ul>
					</div>
					<div class="foo" id="foo3">
						<ul style="list-style-type:none;">
							<li><a herf="">购物相关</a></li>
							<li style="color:grey;"><a herf="">帮助中心</a></li>
							<li style="color:grey;"><a herf="">周边产品</a></li>
							<li style="color:grey;"><a herf="">oppo体验店</a></li>
							<li style="color:grey;"><a herf="">客户服务政策</a></li>
						</ul>
					</div>
					<div class="foo" id="foo4">
						<ul style="list-style-type:none;">
							<li><a herf="">会员中心</a></li>
							<li  style="color:grey;"><a herf="">产品注册</a></li>
							<li  style="color:grey;"><a herf="">会员注册</a></li>
							<li style="color:grey;"><a herf="">会员登录</a></li>
						</ul>
					</div>
					<div class="foo" id="foo5">
						<ul style="list-style-type:none;">
							<li><a herf="">关于我们</a></li>
							<li><a herf=""><img src="img\weibo-1.png" margin-top="3px" style="vertical-align: middle;"></a><p style="display: inline-block;vertical-align: middle; color:grey;">新浪微博</p></a></li>
							<li><a herf=""><img src="img\tenxun-1.png" margin-top="3px" style="vertical-align: middle;"></a><p style="display: inline-block;vertical-align: middle; color:grey;">腾讯微博</p></li>
							<li><a herf="">
								<img src="img\renren.png" margin-top="3px" style="vertical-align: middle;"></a><p style="display: inline-block;vertical-align: middle;color:grey;">人人网</p></a></li>
							<li><a herf=""><img src="img\qq.png" margin-top="3px" style="vertical-align: middle;"></a><p style="display: inline-block;vertical-align: middle;color:grey;">QQ空间</p></a></li>
						</ul>
					</div>
					<div class="foo" id="foo6">
						<ul style="list-style-type:none;">
							<li><a herf="">联系我们</a></li>
							<li style="line-height: 40px;"><a herf=""><img src="img\tell.jpg" width="23px" height="23px"margin-top="3px" style="vertical-align: middle;margin-right: ;4px;"></a><p style="display: inline-block;vertical-align: middle;font-size: 19px;color:green;">4001-666-888</p></a></li>
							<li style="color:grey;"><a herf="">7*24客服电话</a></li>
							<li style="line-height: 40px;"><a herf=""><img src="img\kefu.jpg" width="23px" height="23px"margin-top="3px" style="vertical-align: middle;margin-right:22px;color:grey;"></a><p style="display: inline-block;vertical-align: middle;font-size: 20px;color:green;">在线客服</p></a></li>
							<li style="font-size: 16px;color:grey;"><a herf="">服务时段:8:30-22:00</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="return">
		<a href=""><img src="img/totop.png" style="position: fixed; bottom:25px;right: 0px;float:right;"></a>
	</div>
	<script type="text/javascript">
	window.onscroll = function() {scrollFunction()};

function scrollFunction() {console.log(121);

if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

document.getElementById("return").style.display = "block";

} else {

document.getElementById("return").style.display = "none";

}

}

function topFunction() {

document.body.scrollTop = 0;

document.documentElement.scrollTop = 0;

}
</script>
</body>
<script type="text/javascript">
 function div_tab(tabName){
 var tabLinkArr=document.getElementsByName("tablink");
 var tabPicArr=document.getElementById("tabpic").getElementsByTagName("div");
 for(var i=0;i<tabLinkArr.length;i++){
  if(i==tabName){
  tabLinkArr[i].style.color="#ff0000";
  tabPicArr[i].style.display="block";
  } else{
  tabLinkArr[i].style.color="#0000ff";
  tabPicArr[i].style.display="none";
  }
 }
 }
 var i=0;
 function auto_tab_div(){
 if(i>2){
 i=0;
 }
 div_tab(i);
 i++;
 }
 setInterval("auto_tab_div()",1000);
</script>
</html>